<template>
  <div class="app-container home">
    <t-ag-grid
      :loading="loading"
      align="center"
      header-align="center"
      :columnDefs="column"
      :stripe="false"
      :rowData="myData.tableData"
      :suppress-row-transform="true"
      :tooltipShowDelay="0"
      :suppressContextMenu="true"
      :enableRangeSelection="false"

      :suppressColumnVirtualisation="true"
      :defaultColDef = "{
          suppressMenu:true
      }"
      @cell-double-clicked="onCellDoubleClicked"
        />

    <!-- 点击奇数行 -->
    <el-dialog v-model="openFirstLine" width="350" append-to-body>
          <el-form label-width="80px">
            <el-form-item label="是否连续" prop="referenceCv">
                  <!-- <el-input v-model="form.firstLine" style="width: 200px;"/> -->

                  <el-select v-model="form.firstLine" style="width: 2000px;">
                      <el-option
                          v-for="dict in myData.firstLineOptions"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                      />
                  </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="submitFirstLine">确 定</el-button>
                  <el-button @click="cancelFirstLine">取 消</el-button>
              </div>
          </template>
      </el-dialog>

      <!-- 点击偶数行 -->
      <el-dialog v-model="openSecondLine" width="350" append-to-body>
          <el-form label-width="80px">
            <el-form-item label="例外对象">
                  <el-select multiple
                                clearable
                                collapse-tags
                                collapse-tags-tooltip v-model="form.secondLine" placeholder="例外无" style="width: 2000px;">
                      <el-option
                          v-for="dict in myData.secondLineOptions"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                      />
                  </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="submitSecondLine">确 定</el-button>
                  <el-button @click="cancelSecondLine">取 消</el-button>
              </div>
          </template>
      </el-dialog>

      <!-- 备注 -->
      <el-dialog v-model="openRemark" width="350" append-to-body>
          <el-form label-width="80px">
            <el-form-item label="备注">
              <el-input v-model="form.remark" style="width: 200px;"/>
            </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="submitRemark">确 定</el-button>
                  <el-button @click="cancelRemark">取 消</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup name="Continuous">
  import { get } from "lodash-es"
  import { gridRowSpanning } from "@/components/ag-grid"
  import { newTableRowSpan } from "@/utils/zhangxintong"
  import { column, isPreviousLine, queryTableData, editTableData, getEditOptions } from './config'
  import { computed, reactive, toRaw } from "vue"

  const openFirstLine = ref(false)
  const openSecondLine = ref(false)
  const openRemark = ref(false)

  const loading = ref(false)

  const form = reactive({
    firstLine: null,
    secondLine: null,
    remark: null
  })

  const myData = reactive({
    tableData: [],
    firstLineOptions: [
      { label: 'Y', value: '连续' },
      { label: 'N', value: '' }
    ],
    secondLineOptions: []
  })

  const saveForm = reactive({
    rCodeX: '',
    rCodeY: '',
    status: '',
    cValue: ''
  })

  let rowSpanData = {}

  const spanTarget = ['lossName', 'eptStatus', 'rCode']
  // const rowSpan = computed(() => newTableRowSpan(myData.tableData, spanTarget))
  // const rowSpan = computed(() => newTableRowSpan(myData.tableData, ['lossName', 'eptStatus', 'rCode']))

  const cellRenderer = (params) => {
    return `<div style="margin-top:${(params.data.rowSpanNum - 1) * 16}px"}}> ${params.value}</div>`   // 用于字体垂直居中
  }

  const rowSpan = ({ colDef, node, data }) => {
    const { field } = colDef
    return get(rowSpanData, `${node?.rowIndex}.${field}`, 1)
  }

  column.forEach((item_1) => {
    item_1.children?.forEach((item_2) => {
      item_2.children?.forEach((item_3) => {
        item_3.sortable = false
        if(spanTarget.includes(item_3.field)){
          item_3.rowSpan = rowSpan
        }
      })
    })
  })

  const queryList = () => {
    loading.value = true
    queryTableData().then((res) => {
      loading.value = false
      myData.tableData = res.rows
      rowSpanData = gridRowSpanning(myData.tableData, spanTarget, { null: true, isMultilevel: true })
    })
  }

  const onCellDoubleClicked = ({ colDef, value, rowIndex, data }) => {
    // 点击备注列
    if(colDef.field === 'remark'){
      // alert('修改备注')
      openRemark.value = true
      form.remark = value
      /** 保存条件赋值 */
      saveForm.rCodeX = data.rCode
      saveForm.rCodeY = colDef.field
      saveForm.status = (rowIndex + 1) % 2 === 1 ? 'upper': 'under'
    } else if(!spanTarget.includes(colDef.field)){
      if((rowIndex + 1) % 2 === 1 ){ /** 每种状态的第一项 无条件可编辑 */
        // alert('编辑的是奇数行')
        openFirstLine.value = true
        form.firstLine = value ? value : ''
        /** 保存条件赋值 */
        saveForm.rCodeX = data.rCode
        saveForm.rCodeY = colDef.headerName
        saveForm.status = 'upper'
      } else { /** 每种状态的第二项 第一项有值才可编辑 */
        if(isPreviousLine(myData.tableData, colDef.field, rowIndex)[rowIndex - 1]?.length){
          // alert('编辑的是偶数行')
          openSecondLine.value = true
          form.secondLine = (value === '例外无' || value === '') ? '' : value?.split(',')
          /** 保存条件赋值 */
          saveForm.rCodeX = data.rCode
          saveForm.rCodeY = colDef.headerName
          saveForm.status = 'under'
        }
      }
    }
  }

  /** 奇数行提交 */
  const submitFirstLine = () => {
    saveForm.cValue = form.firstLine
    editTableData(toRaw(saveForm)).then((res) => {
      if(saveForm.cValue === ''){
        saveForm.status = 'under'
        editTableData(toRaw(saveForm)).then(() => {
          openFirstLine.value = false
          queryList()
        })
      } else {
        saveForm.status = 'under'
        saveForm.cValue = '例外无'
        editTableData(toRaw(saveForm)).then(() => {
          openFirstLine.value = false
          queryList()
        })
      }

    })
  }

  /** 奇数行取消 */
  const cancelFirstLine = () => {
    openFirstLine.value = false
  }

  /** 偶数行提交 */
  const submitSecondLine = () => {
    saveForm.cValue = form.secondLine.length ? form.secondLine.join(',') : '例外无'
    editTableData(toRaw(saveForm)).then((res) => {
      openSecondLine.value = false
      queryList()
    })
  }

  /** 偶数行取消 */
  const cancelSecondLine = () => {
    openSecondLine.value = false
  }

  /** 备注提交 */
  const submitRemark = () => {
    saveForm.cValue = form.remark
    editTableData(toRaw(saveForm)).then((res) => {
      openRemark.value = false
      queryList()
    })
  }

  /** 备注取消 */
  const cancelRemark = () => {
    openRemark.value = false
  }

  queryList()

  /** 获取编辑 options */
  getEditOptions({
    oeeRerunFlag:"Y"
  }).then((res) => {
    res.rows.forEach((item) => {
      myData.secondLineOptions.push({
        label: item.machineTypeId,
        value: item.machineTypeId
      })
    })
  })

</script>

<style lang="less" scoped>
:deep(.ag-pinned-left-header .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:first-child) {
  border-top: none;
}

:deep(.ag-pinned-left-header .ag-header-row:first-child .ag-header-group-cell.ag-header-group-cell-with-group:first-child::before) {
  background: #000 !important;
  content: '';
  position: absolute;
  width: 1px;
  height: 1000px;
  top: 0;
  left: 0;
  background-color: red;
  opacity: .3;
  display: block;
  transform: rotate(-68deg);
  transform-origin: top;
  z-index: 9999;
}

:deep(.ag-pinned-left-header .ag-header-row:not(first-child) .ag-header-group-cell.ag-header-group-cell-with-group:first-child::before) {
  background: #000 !important;
  content: '';
  position: absolute;
  width: 1px;
  height: 1000px;
  bottom: 0;
  right: 0;
  background-color: red;
  opacity: .3;
  display: block;
  transform: rotate(-68deg);
  transform-origin: bottom;
  z-index: 9999;
}
</style>
